<template>
  <div class="about">
    <h1>01.点击测试</h1>
    <div>
      <p>{{ count }}-{{ double }}-{{ totalCount }}-{{ doubleCount }}</p>
      <div><button @click="addCount">增加点击次数</button></div>
    </div>
    <h1>02.点击测试</h1>
    <div>
      <p>{{ num }}</p>
      <div><button @click="addNum">增加点击次数</button></div>
    </div>
  </div>
  <!-- teleport 隔离组件 -->
  <teleport to='#endo'>
    <h1 v-if="show" >teleport show</h1>
  </teleport>
</template>
<script>
import {
  computed,
  reactive,
  readonly,
  ref,
  toRefs,
  watch,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  getCurrentInstance
} from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: "demo",
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => {
        return state.count * 2;
      }),
      miniObj: {
        innerObj: {
          size: 0,
        },
      },
      show:false
    });
    const num = ref(0);
    const addCount = () => {
      state.count++;
      state.miniObj.innerObj.size++;
    };
    const addNum = () => {
      num.value++;
      state.show = true
    };
    // 路由
    const router = useRouter()
    const route = useRoute()
    console.log("路由参数",router,route)
    // store
    const store = useStore()
    console.log("store参数",store)
    // readlony
    const readonlyState = readonly(state);
    // 监听只读属性，state.count修改后依然会触发readonlyState.count更新
    watch(
      () => readonlyState.count,
      (newVal, oldVal) => {
        console.log("readonly state is changed!");
        setTimeout(() => {
          // 修改只读属性会打印告警信息，但是不会报错
          readonlyState.count = "readlony";
        }, 1000);
      }
    );
    // computed
    // only getter
    const totalCount = computed(() => state.count + num.value);
    // getter or setter
    const doubleCount = computed({
      get() {
        return state.count * 2;
      },
      set(newVal) {
        state.count = newVal / 2;
      },
    });
    // watch-监听单个属性
    watch(
      () => totalCount.value,
      (newVal, oldVal) => {
        console.log("totalCount:" + " new:" + newVal + " old:" + oldVal);
      }
    );
    // watch 监听单个属性 immediate
    watch(
      () => totalCount.value,
      (newVal, oldVal) => {
        console.log(
          "totalCountImmediate:" + `count+num = ${newVal}, immediate=true`
        );
      },
      {
        immediate: true,
      }
    );
    // watch 监听单个属性 deep
    watch(
      () => state.miniObj,
      (newVal, oldVal) => {
        console.log(`state.midObj = ${JSON.stringify(newVal)}, deep=true`);
      },
      {
        deep: true,
      }
    );
    // watch 监听多个属性
    watch(
      [num, () => totalCount.value],
      ([numVal, totalVal], [oldNumVal, OldTotalVal]) => {
        console.log(
          `监听多个属性：num is ${numVal}, count + num = ${totalVal}`
        );
      }
    );
    //声明周期
    onBeforeMount(() => {
      console.log('component is onBeforeMount')
    })
    onMounted(() => {
      console.log('component is onMounted')
    })
    onBeforeUpdate(() => {
      console.log('component is onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('component is onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('component is onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('component is onUnmounted')
    })

    return {
      ...toRefs(state),
      num,
      totalCount,
      doubleCount,
      addCount,
      addNum,
    };
  },
};
</script>